<template>
<div>
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>系统中心</el-breadcrumb-item>
    <el-breadcrumb-item>菜单管理</el-breadcrumb-item>
  </el-breadcrumb>
  <el-card>
  <el-row>
    <el-col :span="12">
      <el-tree
        :data="data"
        show-checkbox
        node-key="id"
        default-expand-all
        :expand-on-click-node="false">
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span><i :class="data.icon"></i>&nbsp;{{data.menuName}}</span>
        <span>
          <el-button
            type="text"
            size="mini"
            @click="() => append(data)">
            添加
          </el-button>
           <el-button
             type="text"
             size="mini"
             @click="() =>update(node,data)" v-if="data.id!=0">
            修改
          </el-button>
          <el-button
            type="text"
            size="mini"
            @click="() => remove(node, data)">
            删除
          </el-button>
        </span>
      </span>
      </el-tree>
  </el-col>
    <el-col :span="12">
      <el-card v-if="isShow">
        <div slot="header" class="clearfix">
          <span>菜单信息</span>
          <el-button style="float: right;" type="text" @click="saveMenu">保存</el-button>
          <el-button style="float: right;" type="text" @click="closeMenu">关闭</el-button>
        </div>
        <el-form :model="menuForm" label-width="70px" >
          <el-form-item label="父级菜单">
            <el-input v-model="parentName"  size="small" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="菜单图标">
            <el-input v-model="menuForm.icon"  size="small"></el-input>
          </el-form-item>
          <el-form-item label="菜单名称">
            <el-input v-model="menuForm.menuName"  size="small"></el-input>
          </el-form-item>
          <el-form-item label="菜单类型">
            <el-select v-model="menuForm.menuType" placeholder="请选择" size="small">
              <el-option label="目录" :value="0"> </el-option>
              <el-option label="菜单" :value="1"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="跳转路径" v-if="menuForm.menuType==1">
            <el-input v-model="menuForm.url"  size="small"></el-input>
          </el-form-item>
        </el-form>
      </el-card>
  </el-col>
  </el-row>
  </el-card>
</div>
</template>

<script>
    export default {
        name: "menus",
      data() {
        return {
          data:[{
            id:0,
            menuName: '用户管理系统',
            icon:'el-icon-platform-eleme',
            children: []
            }],
          menuForm:{},
          parentName:'',
          isShow:false
        }
      },
      methods:{
        search:function(){
            this.$http.get("/finance-service-system/menu/getTree").then(
              (res)=>{
                if(res.data.success){
                  this.data[0].children=res.data.result;
                }else{
                  this.$message.error(res.data.message);
                }
              }
            );
        },
        update:function(node,data){
          this.parentName=node.parent.data.menuName;
          this.$http.get("/finance-service-system/menu/getone/"+data.id).then(
            (res)=>{
              this.menuForm=res.data.result;
            }
          );
          this.isShow=true;
        },
        remove:function(node,data){
          this.$http.get("/finance-service-system/menu/del/"+data.id).then(
            (res)=>{
              if (res.data.success) {
                this.search();
                this.$message({
                  message: res.data.message,
                  type: 'success'
                });
              } else {
                this.$message.error(res.data.message);
              }
            }
          );
        },
        append:function (data) {
          this.isShow=true;
          this.menuForm={};
          this.parentName=data.menuName;
          this.menuForm.parentId=data.id;
          if(data.children==null){
            this.menuForm.orderNum=0;
          }else{
            this.menuForm.orderNum=data.children.length;
          }
        },
        saveMenu:function(){
            this.$http.post("/finance-service-system/menu/savemenu",this.menuForm).then(
              (res)=>{
                if (res.data.success) {
                  this.search();
                  this.$message({
                    message: res.data.message,
                    type: 'success'
                  });
                  this.menuForm={};
                } else {
                  this.$message.error(res.data.message);
                }
                this.isShow=false;
              }
            );
        },
        closeMenu:function () {
            this.menuForm={};
            this.isShow=false;
        }
      },
      mounted() {
          this.search();
      }
    }
</script>

<style lang="less" scoped>

</style>
